<template>
	<view>
		<view class="search">
			<u-search height="70rpx" bgColor="#fff" :showAction="false" placeholder="请搜索手机号或者用户名" v-model="keyword"></u-search>
		</view>
		<view class="nav">
			<u-subsection style="height: 70rpx;" @change="sectionChange" :list="navlist"
				:current="current"></u-subsection>
		</view>
		<view class="product">
			<view class="List" v-for="(item,i) in 4" :key="i">
				<view class="p-header">
					<view class="p-name">
						合肥煤气罐一号
					</view>
					<view class="p-status">
						<text>已租</text>
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						客户姓名
					</view>
					<view class="p-right">
						周先生
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						客户电话
					</view>
					<view class="p-right">
						17855552131
					</view>
				</view>

				<view class="p-content">
					<view class="p-left">
						租借日期
					</view>
					<view class="p-right">
						2023-12-12
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						归还日期
					</view>
					<view class="p-right">
						2024-2-12
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						租借数量
					</view>
					<view class="p-right">
						3件
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						租借押金
					</view>
					<view class="p-right">
						200元
					</view>
				</view>

				<view class="p-content">
					<view class="p-left">
						租借合计
					</view>
					<view class="p-right">
						500元
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						客户地址
					</view>
					<view class="p-right">
						安徽省合肥市包河区融创广场B1311
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				List: [],
				navlist: ['已租商品', '未租商品', '已退商品'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0
			}
		},
		methods: {
			sectionChange(e) {
				this.current = e
			}
		}
	}
</script>

<style>
	.search {
		margin: 0 auto;
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav {
		width: 80%;
		height: 100rpx;
		margin: 0rpx auto 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.List {
		margin: 20rpx auto;
		width: 94%;
		border-radius: 16rpx;
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.p-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 94%;
		margin: 0 auto;
		height: 90rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.p-name {
		font-weight: bold;
	}

	.p-status {
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 5rpx 12rpx;
		background-color: #f0f5fc;
		color: #669bf9;
	}

	.p-content {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		color: #7a7a7a;
		font-size: 30rpx;
	}

	.p-left {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;

	}

	.p-right {
		width: 75%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}
</style>